/*
 * @Description: 图表模型js
 * @Author: Huang Junjie
 * @Date: 2021-10-19 19:36:45
 * @LastEditTime: 2021-10-20 23:00:31
 * @LastEditors: Huang Junjie
 */

// 引入echarts
const echarts = require('echarts');

// 线路基础统计 - 柱状图
export function ColumnChart01(myChart, xAxisData, seriesData) {
  myChart.clear();
  myChart.setOption({
    grid: {
      top: 10,
      left: 10,
      right: 10,
      bottom: 10,
      containLabel: true
    },
    legend: {
      bottom: 0,
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 35,
      textStyle: {
        color: '#666666'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    // dataset: dataset,
    xAxis: {
      type: 'category',
      axisTick: {
        show: true,
        alignWithLabel: true,
        inside: true,
        lineStyle: {
          color: '#EBEBEB',
          width: 1,
          opacity: 1
        }
      },
      axisLabel: {
        textStyle: {
          color: '#666666'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#EBEBEB',
          width: 1,
          opacity: 1
        }
      },
      data: xAxisData
    },
    yAxis: {
      show: true,
      // splitNumber: 4,
      min: 0,
      // max: 1000,
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#666666'
        }
      },
      axisLine: {
        lineStyle: {
          width: 0
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#EBEBEB',
          width: 1,
          opacity: 1
        }
      }
    },
    series: [
      {
        type: 'bar',
        barWidth: '30px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: '#359CF9' },
                { offset: 1, color: '#54B2FC' }
              ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            )
          }
        },
        data: seriesData
      }
      // {
      //   type: 'bar',
      //   barWidth: '30px',
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(
      //         0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
      //         [
      //           { offset: 0, color: '#FF8C00' },
      //           { offset: 1, color: '#FFAF24' }
      //         ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
      //       )
      //     }
      //   }
      // }
    ]
  });

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, 500);
}

// 关键设备类型 - 饼状图
export function PieChart01(myChart, legendList, seriesData) {
  myChart.clear();
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 15,
      top: 10,
      bottom: 10,
      right: 'right',
      textStyle: {
        color: '#646464'
      },
      formatter: function(name) {
        // 获取legend显示内容
        const data = seriesData;
        // let total = 0
        let tarValue = 0;
        for (let i = 0, l = data.length; i < l; i++) {
          // total += data[i].value
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        // const p = (tarValue / total * 100).toFixed(2)
        // return name + ' ' + tarValue + '台 ' + p + '%'
        return name + ' ' + tarValue + '台';
      },
      data: seriesData
    },
    series: [
      {
        clockwise: true,
        center: ['28%', '50%'],
        name: '关键设备类型',
        type: 'pie',
        // selectedMode: 'single',
        radius: ['40%', '50%'],
        avoidLabelOverlap: true,
        label: {
          normal: {
            show: true,
            position: 'center',
            color: '#666666',
            formatter: '16324\n设备（个）'
          }
        },
        labelLine: {
          show: false
        },
        data: seriesData
      }
    ]
  });

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, 500);
}

// 设备台账统计 - 饼状图
export function PieChart02(myChart, seriesData) {
  myChart.clear();
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   bottom: 0,
    //   itemWidth: 15,
    //   itemHeight: 10,
    //   itemGap: 15,
    //   left: 'center',
    //   textStyle: {
    //     color: '#646464',
    //     fontSize: '14px'
    //   },
    //   formatter: function(name) {
    //     // 获取legend显示内容
    //     const data = [
    //       { value: 3685, name: '监测', itemStyle: { color: '#3495fc' }},
    //       { value: 985, name: '检修', itemStyle: { color: '#89D1FE' }},
    //       { value: 400, name: '更换', itemStyle: { color: '#FFAF24' }}
    //     ]
    //     let total = 0
    //     let tarValue = 0
    //     for (let i = 0, l = data.length; i < l; i++) {
    //       total += data[i].value
    //       if (data[i].name === name) {
    //         tarValue = data[i].value
    //       }
    //     }
    //     const p = (tarValue / total * 100).toFixed(2)
    //     return name + '：' + tarValue + '(' + p + '%)'
    //   }
    // },
    series: [
      {
        clockwise: true,
        center: ['50%', '50%'],
        name: '设备台账统计',
        type: 'pie',
        selectedMode: 'single',
        radius: ['0', '50%'],
        avoidLabelOverlap: true,
        label: {
          normal: {
            show: true,
            color: '#646464',
            formatter: '{b}\n{c}'
          }
        },
        labelLine: {
          show: true
        },
        data: seriesData
      }
    ]
  });

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, 500);
}
